<template>
  <div>
    <h3>商家列表</h3>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="6" class="col-group">
            <el-card @click="$router.push('merchant_detail')" class="card-group add-card">+</el-card>
        </el-col>
        <el-col :span="6" class="col-group" v-for="merchant in merchants" :key="merchant.id">
          <router-link :to="'/merchant_detail' +
           '?id='+ merchant.id">
            <el-card class="card-group">
              <img :src="merchant.logo" class="thumbnail">
              <div class="title">{{merchant.name}}</div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="12"
          :current-page="pageNum"
          @current-change="onCurrentChange"
          class="pagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Merchant",
  data(){
    return {
      merchants: [],
      total: 0,
      pageNum: 1,
    }
  },
  methods:{
    onCurrentChange(newPage){
      this.pageNum = newPage
      this.getMerchants()
    },
    getMerchants(){
        this.$flyLoading.start()
      this.$http.get('cms/merchant/',{
        params:{
          page: this.pageNum
        }
      }).then( resp => {
        this.merchants = resp.data.results
        this.total = resp.data.count
          this.$flyLoading.end()
      }).catch(err => {
        console.log(err)
          this.$flyLoading.end()
      })
    }
  },
  mounted() {
    this.getMerchants(1)
  }


}
</script>

<style scoped lang='scss'>
.list-group{
  width: 800px;
  .col-group{
    margin-top: 20px;
    cursor: pointer;
    .card-group{
      height: 180px;
      width: 100%;
      .thumbnail{
        width: 100%;
      }
      .title{
        padding-top: 10px;
      }
    }
    .add-card{
      font: bolder 100px '微软雅黑';
      display: flex;
      text-align: center;
      justify-content: center;
      color: #BBBEC7;
      &:hover{
        box-shadow: 0px 0 1px rgba(0, 0, 0, 0.4);
      }
    }
  }
  .pagination{
    padding-top: 20px;
  }
}
</style>
